<template>
    <div>
        <a href="/Add">会员新增</a>
        <h1>首页-会员列表</h1>
        <table class="table">
            <thead>
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>sex</td>
                    <td>age</td>

                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{d.id}}</td>
                    <td>{{d.name}}</td>
                    <td>{{d.sex}}</td>
                    <td>{{d.age}}</td>
                    <input type="button" value="删除" class="btn btn-success" @click="del(d.id)">
                </tr>

            </tbody>

        </table>
    </div>
</template>

<script setup lang="ts">
import{ref,onMounted}from 'vue';//从vue导入一个ref工具
import axios from 'axios';

    const data=ref([{
    "id": 2,
    "name": "string",
    "password": "string",
    "sex": "string",
    "age": 0,
    "houbbyCount": 0,
    "houbbyString": "string",
    "isDelete": true,
    "img": "string",
    "memberLevelId": 0,
    "createData": "2025-04-21T09:36:13.729"
  }]) //创建一个数组对象,实际上这里用于保存所有会员对象集合

    //vue钩子函数之一
    onMounted(() => {
        getdata()
    })
//调用api获取所有会员信息
const getdata=()=>{
    axios.get("https://localhost:7043/api/MemBer/GetMemBers").then(res=>{
        data.value=res.data;
    })
}
//删除
const del=(id:any)=>{
    axios.get("https://localhost:7043/api/MemBer/DeleteMemBer",{params:{id:id}}).then(res=>{
        if(res.data>0){
            alert('删除成功');
            getdata()
        }
        else{
            alert('删除失败');
        }
    })
}
</script>

<style scoped>

</style>